
<template>
	<div class="siteproduct">
		<div class="center">
			<left></left>
			<div class="right">
		      <top></top>
		      <div class="hei10"></div>
		      <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
		        当前位置：
		        <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
		        <router-link to="/productionDelivery" style="color: #409eff;">在售商品管理</router-link>>
		       推广站点管理
		      </div>
		      <div class="hei10"></div>
				<div class="title">{{name}}站点地址管理</div>
				<div class="sitepro"><el-button type="primary" size="small" @click="log = true">添加推广产品</el-button></div>
				<div class="con" v-loading="loading">
					<div class="list">
						<div class="th">商品名称</div>
						<div class="th">商品上下架</div>
						<div class="th">二维码</div>
						<div class="th">推广链接</div>
						<div class="th">操作</div>
					</div>
					<div class="list" v-for="item in list2" :key="item.id">
						<div class="td">{{item.title}}</div>
						<div class="td" v-if="item.page_status == 100">上架中</div>
						<div class="td" v-if="item.page_status != 100">下架中</div>
						<div class="td" @click="biger(item.link)">
							<qrcode :value="item.link" :options="{ size: 250 }" class="erweima" ></qrcode>
						</div>
						<div class="td cur" @click="copy(item.link)">复制链接</div>
						<div class="td">
							<span @click="fix(item.id)" class="cur2" >修改产品</span>
							<span @click="delet(item.id)" class="cur2" >删除</span>
						</div>
					</div>
					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
				</div>

			</div>
		</div>

		<el-dialog title="二维码" :visible.sync="erlog" width="500px" class="sitelog">
			  <div>
				  	<qrcode :value="linkbig" id="canvas" :options="{ size: 460 }"></qrcode>
			  </div>
			  <span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="erlog = false">好的</el-button>
			  </span>
		</el-dialog>

		<el-dialog title="新建站点" :visible.sync="log" width="990px" class="sitelog">
			  <div>
				  	<el-checkbox-group v-model="checkshop" @change="show">
						<el-checkbox :label="item.id" v-for="item in list" :key="item.id">{{item.title}}</el-checkbox>
					</el-checkbox-group>
			  </div>
			  <span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取消</el-button>
				<el-button type="primary" @click="loggo">确定添加</el-button>
			  </span>
		</el-dialog>
		<el-dialog title="修改产品" :visible.sync="fixlog" width="500px" class="sitelog">
			  <div>
				  	<el-form ref="form" @submit.native.prevent :model="form" label-width="150px">
						<el-form-item label="通过商品名称修改:">
							<el-input v-model="fixproname" :disabled="fixpronameshow" @input="searchproname" placeholder="输入商品名称"></el-input>
						</el-form-item>

						<el-form-item label="通过商品编码修改:">
							<el-input v-model="fixprocode" :disabled="fixprocodeshow" @input="searchprocode" placeholder="输入商品编码"></el-input>
						</el-form-item>
						<el-form-item label="查询结果:">{{fixpronames}}</el-form-item>
					</el-form>
			  </div>
			  <span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取消</el-button>
				<el-button type="primary" @click="fixgo">确定修改</el-button>
			  </span>
		</el-dialog>

		<foot></foot>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	import QRcode from '@xkeshi/vue-qrcode';
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot,
			qrcode : QRcode
		},
		name: 'siteproduct',
		data(){
			return{
				fixlog:false,
				fixproname:"",
				fixprocode:"",
				fixpronameshow:false,
				fixprocodeshow:false,
				fixpronames:"",
				fixid:"",
				fixchooseid:"",

				erlog:false,

				form:{},
				msg:"hello",
				loading:true,
                log:false,
                log2:false,
                checkshop:[],
				disid:"",
				result:"",
				list:"",
				list2:"",
				total:0,
				pagesize:999,
				page:1,
				shop_id:"",

				link:"",
				linkbig:"",
				name:""

			}
		},
		created() {

			this.getpro();

			axios.get('/api/plan-market/media/info?id='+ this.$route.query.id)
					.then(response => {
						if(response.data.msg.code == 0){
							this.name = response.data.data.name
						}else{
							this.$message.error(response.data.msg.info);
						}
					})


			axios.get('/api/gth/user/shop')
                .then(response => {
                    if(response.data.msg.code == 0){
						this.shop_id = response.data.data.shop_id
						this.getlist();
                    }else{
                        if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
                        that.$message.error(response.data.msg.info);
                    }
                })
		},
		methods:{
			utf16to8:function(str) {
			    var out, i, len, c;
			    out = "";
			    len = str.length;
			    for(i = 0; i < len; i++) {
			    c = str.charCodeAt(i);
			    if ((c >= 0x0001) && (c <= 0x007F)) {
			        out += str.charAt(i);
			    } else if (c > 0x07FF) {
			        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
			        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
			        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
			    } else {
			        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
			        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
			    }
			    }
			    return out;
			},

			biger:function(link){
				this.linkbig = link
				this.erlog = true
			},
			//修改产品查询
			searchproname: function() {
				if (this.fixproname == "") {
					this.fixprocodeshow = false;
				} else {
					this.fixprocodeshow = true;
				}
				this.fixpronames = "查询中...";
				axios.get("/api/plan-market/order-page/my?title=" + encodeURIComponent(this.fixproname))
					.then(response => {
						if (response.data.msg.code != 0) {
							this.$message.error(response.data.msg.info);
						} else {
							if (response.data.data == null) {
								this.fixpronames = "销售中心无该产品信息";
								this.fixproid = "";
							} else {
								this.fixproid = response.data.data.id;
								this.fixpronames = response.data.data.title;
							}
						}
				});
			},
			searchprocode: function() {
				if (this.fixprocode == "") {
					this.fixpronameshow = false;
				} else {
					this.fixpronameshow = true;
				}
				this.fixpronames = "查询中...";
				axios.get("/api/plan-market/order-page/my?fetch_code=" + encodeURIComponent(this.fixprocode))
					.then(response => {
						if (response.data.msg.code != 0) {
							this.$message.error(response.data.msg.info);
						} else {
							if (response.data.data == null) {
								this.fixpronames = "没有查询到商品";
								this.fixproid = "";
							} else {
								this.fixproid = response.data.data.id;
								this.fixpronames = response.data.data.title;
							}
						}
				});
			},
			fixgo:function(id){
				var that = this;
				axios.post('/api/plan-market/media/product/update',{media_id:this.$route.query.id,id:this.fixchooseid,good_id:this.fixproid})
					.then(response => {
						if(response.data.msg.code == 0){
							that.loading = true
							that.$message({
								message: '修改商品成功！',
								type: 'success'
							});
							that.fixlog = false
							that.loading = true
							that.getlist();
						}else{

						}
					})
			},
			fix:function(id){
				this.fixlog = true
				this.fixchooseid = id
			},
			delet:function(){

			},
			//翻页功能
			fanye:function(page){
				this.page = page
				this.getpro()
			},
			//获取商品
			getpro:function(){
				var that = this;
				axios.get('/api/gth/order-pages?status=100&_page='+this.page+'&_page_size='+this.pagesize)
					.then(response => {
						if(response.data.msg.code == 0){
							that.list = response.data.data.data
						}else{
							if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
							that.$message.error(response.data.msg.info);
						}
					})
			},
			show:function(){
				console.log(this.checkshop)
			},
            go:function(){

            },
            getlist:function(){
				this.checkshop = []
				var that = this;
				axios.get('/api/plan-market/media/product/list?media_id='+this.$route.query.id+'&page='+this.page+'&pagesize='+this.pagesize)
					.then(response => {
						if(response.data.msg.code == 0){
							for( var i in response.data.data){
								response.data.data[i].link = window.location.origin+"/webapp/merchant/templet2.html?share_id="+that.shop_id+"&id="+response.data.data[i].id+"&media_id="+that.$route.query.id

								// window.location.origin+"/#/marketsite/siteerweima?id="+response.data.data[i].id+"&media_id="+that.$route.query.id+"&share_id="+that.shop_id
								that.checkshop.push(response.data.data[i].good_id)
								console.log(response.data.data[i].link)
							}

							that.total = response.data.total
							that.list2 = response.data.data
							that.loading = false

							// this.$router.push({ path: "/marketsite/siteerweima",query: { id: id, media_id:this.$route.query.id,share_id:this.shop_id } });
						}else{
							if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
							that.$message.error(response.data.msg.info);
						}
					})
            },
            //删除
            delet:function(id){
                this.$confirm('确认删除此商品吗?', '提示', {
                	  confirmButtonText: '确定',
                	  cancelButtonText: '取消',
                	  type: 'warning'
                }).then(() => {
                	  var that = this
                	  that.loading = true
                	  axios.post('/api/plan-market/media/product/delete', {media_id:this.$route.query.id,id:id})
                	  	.then(response => {
                	  		if(response.data.msg.code != 0){
                	  			this.$message.error(response.data.msg.info);
                	  		}else{
                	            this.loading = true
                	  			this.$message({
                	  			  message: '删除商品成功！',
                	  			  type: 'success'
                	  			});
                	  			that.getlist()
                	  		}
                	  	})
                })
			},
			//复制功能
			copy:function(t) {
				var that = this;
				this.$copyText(t).then(res => {
					that.$message.success("复制成功");
				});
			},
			//点击添加
			loggo:function(){
				var that = this;
				axios.post('/api/plan-market/media/products/add',{ids:this.checkshop,media_id:this.$route.query.id})
					.then(response => {
						if(response.data.msg.code == 0){
							that.loading = true
							that.$message({
								message: '设置商品成功！',
								type: 'success'
							});
							that.log = false
							that.getlist();
						}else{

						}
					})
            },
            loggo2:function(){
				var that = this;
				axios.post('/api/plan-market/supplier/add',{secret:this.disid})
					.then(response => {
						if(response.data.msg.code == 0){
							that.loading = true
							that.$message({
								message: '添加成功！',
								type: 'success'
							});
							that.log = false
							that.getlist();
						}else{

						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.siteproduct{
	
				.title{border-bottom: 1px #EAEAEA solid; line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
				.add{ padding: 20px 30px}
                .sitepro{padding: 20px;}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
				}
				.el-pagination{ text-align: right; margin: 20px 0}
				.erweima{ width: 30px; position: relative; top: 9px;}
				.cur{ cursor: pointer;  color: #409eff;}
				.cur2{ margin:0 5px; cursor: pointer; color: #409eff;}

		.result{ margin-top: 20px;}
		.sitelog{
			.el-checkbox-group{ display: flex; flex-wrap: wrap;
				.el-checkbox{ flex-basis: 200px; overflow: hidden;}
			}
		}
	}
</style>
